<template>
  <div class="login-container">
    <div class="header">
      <div class="header-wrap">
        <a href="">
          <span class="header-wrap-logo">
            <img src="https://img-shop.qmimg.cn/shop/ZM59CA045794EF72440.png" alt="">
          </span>
        </a>
        <span class="header-wrap-title">{{ showTitle[showIndex] }}</span>
      </div>
    </div>
    <div class="content">
      <!--用户登录-->
      <div class="content-wrap login-wrap" v-if="showIndex == 0">
        <div class="content-wrap-l">
          <div class="cwl-switch">
            <div class="cwl-switch-wrap" :class="{cwlSwitchWrapAni: switchQr}">
              <div class="cwl-btn-client">
                <div class="cwl-btn-icon" style="width: 60px; height: 60px;margin: 0;" @click="switchQr = false">
                  <svg t="1547459081341" class="icon" style="width: 100%; height: 100%;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5831"><path d="M656 908.8h169.6c32 0 57.6 25.6 57.6 57.6s-25.6 57.6-57.6 57.6h-60.8l-108.8-115.2-147.2-140.8h147.2v140.8z m-316.8-310.4l-108.8-108.8 108.8 108.8z m83.2 83.2h518.4V86.4H86.4v259.2c-32-32-57.6-60.8-86.4-86.4V86.4C0 38.4 38.4 0 86.4 0h854.4C988.8 0 1027.2 38.4 1027.2 86.4v598.4c0 48-38.4 86.4-86.4 86.4H508.8c-28.8-32-57.6-60.8-86.4-89.6z m-192-483.2h569.6v396.8H339.2l-105.6-105.6V198.4z" fill="#409EFF" p-id="5832" data-spm-anchor-id="a313x.7781069.0.i12"></path></svg>
                </div>
              </div>
              <div class="cwl-btn-qrcode">
                <div class="cwl-btn-icon" style="width: 88px; height: 88px;margin: -11px 0px 0px -18px;" @click="switchQr = true">
                  <svg t="1547459320435" class="icon" style="width: 100%; height: 100%;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15171" data-spm-anchor-id="a313x.7781069.0.i22"><path d="M887.22270225 793.52807225L887.22270225 742.82744636 836.5228172 742.82744636Z" fill="#409EFF" p-id="15172"></path><path d="M405.57083486 185.12501161L405.57083486 311.875464 456.27071917 362.57608917 456.27071917 134.42512656 228.11975727 134.42512656 278.8196416 185.12501161Z" fill="#409EFF" p-id="15173"></path><path d="M836.5228172 540.02716748L659.07173963 540.02716748 659.07173963 565.37710964 709.77162395 616.07699397 709.77162395 590.72705179 760.47224985 590.72705179 760.47224985 641.42693612 735.1223077 641.42693612 836.5228172 742.82744636 836.5228172 692.12756202 887.22270225 692.12756202 887.22270225 641.42693612 887.22270225 590.72705179 836.5228172 590.72705179Z" fill="#409EFF" p-id="15174"></path><path d="M380.22015183 286.52552112L380.22015183 210.47495377 304.17032463 210.47495377Z" fill="#409EFF" p-id="15175"></path><path d="M506.97060422 134.42512656l50.69988432 0 0 50.69988433-50.69988432 0 0-50.69988433Z" fill="#409EFF" p-id="15176"></path><path d="M659.07173963 134.42512656l0 228.15096262 228.15096262 0L887.22270225 134.42512656 659.07173963 134.42512656zM836.5228172 311.875464L709.77162395 311.875464 709.77162395 185.12501161l126.75045239 0L836.52207634 311.875464z" fill="#409EFF" p-id="15177"></path><path d="M735.1223077 210.47495377l76.05056807 0 0 76.05056807-76.05056807 0 0-76.05056807Z" fill="#409EFF" p-id="15178"></path><path d="M608.37111373 413.2759735L608.37111373 337.22614702 557.67122939 337.22614702 557.67122939 413.2759735 506.97134508 413.2759735 557.67122939 463.97659941 608.37111373 463.97659941 608.37111373 514.67648374 684.4216818 514.67648374 684.4216818 463.97659941 735.1223077 463.97659941 735.1223077 413.2759735Z" fill="#409EFF" p-id="15179"></path><path d="M608.37111373 286.52552112L608.37111373 185.12501161 557.67122939 185.12501161 557.67122939 235.82563679 506.97060422 235.82563679 506.97060422 337.22614702 557.67122939 337.22614702 557.67122939 286.52552112Z" fill="#409EFF" p-id="15180"></path><path d="M836.5228172 413.2759735L785.82219203 413.2759735 785.82219203 463.97659941 735.1223077 463.97659941 735.1223077 514.67648374 887.22270225 514.67648374 887.22270225 463.97659941 836.5228172 463.97659941Z" fill="#409EFF" p-id="15181"></path></svg>
                </div>
              </div>
            </div>
          </div>
          <div class="cwl-qrcode" v-show="switchQr">
            <div class="cwl-qrcode-wrap">
              <div class="cwl-qrcode-wrap-img">
                <img src="http://account.qmai.cn/69e9e115f17374bc4b1cd53b5cea5dc2.jpg">
              </div>
              <div class="cwl-qrcode-wrap-txt">
                打开企迈云商app，扫一扫登录
              </div>
            </div>
          </div>
          <div class="cwl-form" v-show="!switchQr">
            <div class="cwl-form-input">
              <div class="cwl-form-i">
                <label>账号</label>
                <input type="text" class="mobile" placeholder="请输入手机号码" v-model="loginDatas.mobile">
              </div>
              <div class="cwl-form-i">
                <label>密码</label>
                <input type="password" class="password" placeholder="设置密码" v-model="loginDatas.password">
              </div>
            </div>
            <div class="cwl-other">
              <label @click="loginDatas.rememberPwd = !loginDatas.rememberPwd"><div class="checkbox"><i v-if="loginDatas.rememberPwd">√</i></div>记住密码</label>
              <router-link to="/loginwl?act=getPassword">忘记密码？</router-link>
            </div>
            <div class="cwl-btn">
              <el-button type="primary" class="btn" @click="goAddressLogin()">登&nbsp;录
              </el-button>
            </div>
            <div class="cwl-register">
              <p>没有账号，<router-link to="/loginwl?act=register">立即注册</router-link></p>
              <div class="cwl-reg-wrap">
                <div class="cwl-reg-wrap-i">
                  <a href="">
                    <div class="icon qq"><svg-icon icon-class="qq" /></div>
                    <div class="txt">QQ登录</div>
                  </a>
                </div>
                <div class="cwl-reg-wrap-i">
                  <a href="">
                    <div class="icon weixin"><svg-icon icon-class="wechat" /></div>
                    <div class="txt">微信登录</div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content-wrap-r">
          <div class="cwr-wrap">
            <div class="cwr-wrap-logo">
              <img src="http://account.qmai.cn/f21c226400cf8fb34757bd992763b142.png">
            </div>
            <div class="cwr-wrap-title">使用客户端</div>
            <div class="cwr-wrap-describe">获得更便捷、更优质的体验</div>
            <div class="cwr-wrap-link"><a href="">立即下载</a></div>
          </div>
        </div>
      </div>

      <!--用户注册-->
      <div class="content-wrap register-wrap" v-if="showIndex == 1">
        <div class="register-wrap-l">
          <div class="register-wrap-content">
            <div class="register-wrap-content-title">{{ showTitle[showIndex] }}</div>
            <div class="rwc-form">
              <div class="rwc-form-input">
                <div class="rwc-form-i">
                  <div class="rwc-form-i-wrap">
                    <input type="text" class="mobile" placeholder="手机号码" v-model="registerDatas.mobile">
                  </div>
                </div>
                <div class="rwc-form-i">
                  <div class="rwc-form-i-wrap">
                    <input type="text" class="code" placeholder="验证码" v-model="registerDatas.code">
                    <span class="get-code">获取验证码</span>
                  </div>
                </div>
                <div class="rwc-form-i">
                  <div class="rwc-form-i-remind">收不到验证码？点击获取<a href="javascript:;">语音验证码</a></div>
                  <div class="rwc-form-i-wrap">
                    <input type="password" class="password" placeholder="设置密码" v-model="registerDatas.password">
                  </div>
                </div>
              </div>
              <div class="rwc-other">
                <label @click="registerDatas.agree = !registerDatas.agree">
                  <div class="checkbox">
                    <i v-if="registerDatas.agree">√</i>
                  </div>
                  我已经同意<a href="" target="_blank" @click.stop="">《注册协议》</a>
                </label>
              </div>
              <div class="rwc-btn">
                <el-button type="primary" class="btn" >注&nbsp;册
                </el-button>
              </div>
              <div class="rwc-login-link">
                <router-link to="/loginwl">已有账号，立即登录</router-link>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--找回密码-->
      <div class="content-wrap register-wrap get-psw-wrap" v-if="showIndex == 2">
        <div class="register-wrap-l">
          <div class="register-wrap-content">
            <div class="register-wrap-content-title">{{ showTitle[showIndex] }}</div>
            <div class="cwl-form" v-show="!switchQr">
              <div class="cwl-form-input">
                <div class="cwl-form-i">
                  <label>手机号码</label>
                  <input type="text" class="mobile" placeholder="注册时填写的手机号" v-model="getPasswordDatas.mobile">
                </div>
                <div class="cwl-form-i get-psw-form-code-i">
                  <div class="get-psw-form-i-l">
                    <label>短信验证码</label>
                    <input type="text" class="code" placeholder="验证码" v-model="getPasswordDatas.code">
                  </div>
                  <span class="get-code">获取验证码</span>
                </div>
                <div class="cwl-form-i get-psw-form-i">
                  <div class="rwc-form-i-remind">收不到验证码？点击获取<a href="javascript:;">语音验证码</a></div>
                  <div class="get-psw-form-i-wrap">
                    <label>设定新密码</label>
                    <input type="password" class="password" placeholder="6~20个字，建议包含字母和数字" v-model="getPasswordDatas.password">
                  </div>
                </div>
              </div>
              <div class="cwl-btn">
                <el-button type="primary" class="btn" >立即修改
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <footer class="footer">
      <div class="footer-txt">
        <p><img width="12px" style="vertical-align: -2px;" src="https://img-shop.qmimg.cn/public/img/ico_safe.png">&nbsp;通过ISO27001:2013 信息安全认证通过ISO9001:2008质量管理体系认证</p>
        <p><a href="" target="_blank">成都微连科技有限公司</a> 版权所有 Copyright 2009-2018 皖公网安备34019202000074号&nbsp; 增值电信业务经营许可证：皖B2-20170075</p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'Loginwl',
  data() {
    return {
      showTitle: ['用户登录', '用户注册', '找回密码'],
      showIndex: 0,
      switchQr: false,
      loginDatas: {
        mobile: '',
        password: '',
        rememberPwd: false
      },
      registerDatas: {
        mobile: '',
        code: '',
        password: '',
        agree: false
      },
      getPasswordDatas: {
        mobile: '',
        code: '',
        password: ''
      }
    }
  },
  watch: {
    '$route': 'getWay'
  },
  mounted() {
    this.getWay()
  },
  methods: {
    getWay() {
      this.switchQr = false
      if (typeof (this.$route.query.act) !== 'undefined') {
        const queryAct = this.$route.query.act
        this.showIndex = queryAct === 'register' ? 1 : queryAct === 'getPassword' ? 2 : 0
      } else {
        this.showIndex = 0
      }
    },
    goAddressLogin() {
    //   const _this = this
      // 		if (_this.loginDatas.mobile == '' || !_this.loginDatas.mobile) {
    //     _this.$message({
      // 			  message: '请输入电话号码',
      // 			  type: 'error',
      // 			  duration: 1500
    //     })
    //   } else if (!(/^1[34578]\d{9}$/.test(_this.loginDatas.mobile))) {
    //     _this.$message({
      // 			  message: '电话号码格式错误',
      // 			  type: 'error',
      // 			  duration: 1500
    //     })
    //   } else if (_this.loginDatas.password == '' || !_this.loginDatas.password) {
    //     _this.$message({
      // 			  message: '请输入密码',
      // 			  type: 'error',
      // 			  duration: 1500
    //     })
    //   }
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100%;
  width: 100%;
  background-color: #f8f8f8;
  overflow: hidden;
}
.header {
  height: 76px;
  line-height: 76px;
  background-color: #fff;
}
.header-wrap {
  width: 1180px;
  height: 100%;
  margin: 0 auto;
  position: relative;
}
.header-wrap-logo {
  height: 76px;
  vertical-align: middle;
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
}
.header-wrap-logo img {
  display: inline-block;
}
.header-wrap-title {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  color: #666;
  font-size: 18px;
  line-height: 32px;
  margin-left: 25px;
  padding-left: 25px;
}
.header-wrap-title:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  height: 32px;
  background-color: #dcdcdc;
}
.content-wrap {
  width: 980px;
  min-height: 550px;
  margin: 65px auto 0;
  background-color: #fff;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}
.content-wrap-l {
  width: 610px;
  display: flex;
  display: -webkit-flex;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
}
.cwl-switch {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 30px;
  right: 0;
  overflow: hidden;
}
.cwl-switch-wrap {
  width: 120px;
  height: 120px;
  transform: translateX(-50%) translateY(-50%);
  transition: all .25s;
  position: relative;
}
.cwlSwitchWrapAni {
  transform: translateX(0) translateY(0);
  animation: switchWrapAni .25s;
}
@keyframes switchWrapAni {
  0% {transform: translateX(-50%) translateY(-50%);}
  100% {transform: translateX(0) translateY(0);}
}
.cwl-qrcode {
  width: 420px;
  margin: 0 auto;
}
.cwl-qrcode-wrap-img {
  width: 180px;
  height: 180px;
  margin: 0 auto;
}
.cwl-qrcode-wrap-img img {
  width: 100%;
  height: 100%;
  display: block;
}
.cwl-qrcode-wrap-txt {
  text-align: center;
  font-size: 14px;
  color: #999;
  margin-top: 20px;
}
.cwl-btn-icon {
  cursor: pointer;
}
.cwl-btn-qrcode, .cwl-btn-client {
  width: 60px;
  height: 60px;
}
.cwl-btn-client {
  position: absolute;
  top: 0;
  left: 0;
}
.cwl-btn-qrcode {
  position: absolute;
  right: 0;
  bottom: 0;
}
.cwl-form, .rwc-form {
  width: 420px;
  padding: 0;
  margin: 0 auto;
}
.cwl-form-i {
  margin-top: 20px;
  border-bottom: 1px solid #ebebeb;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
input {
  width: 200px;
  outline: none;
}
.get-psw-wrap .password {
  width: 235px;
}
input::-webkit-input-placeholder {
  color: #999;
}
input:-moz-placeholder {
  color: #999;
}
input::-moz-placeholder {
  color: #999;
}
input:-ms-input-placeholder {
  color: #999;
}
label {
  font-weight: normal;
}
.cwl-form-i label {
  width: 100px;
  line-height: 30px;
  padding: 15px 0;
  font-size: 16px;
  color: #666;
  display: block;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.cwl-form-i input, .rwc-form-i input {
  border: none;
  line-height: 30px;
  padding: 15px 0;
  font-size: 16px;
  color: #666;
  font-family: Microsoft YaHei;
  display: block;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.cwl-other, .rwc-other {
  color: #999;
  font-size: 14px;
  padding: 20px 0;
  line-height: 30px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.cwl-other label, .rwc-other label {
  cursor: pointer;
  display: block;
}
.cwl-other label .checkbox, .rwc-other label .checkbox {
  width: 14px;
  height: 14px;
  margin: -1px 5px 0 0;
  -webkit-appearance: none;
  padding: 0;
  display: inline-block;
  vertical-align: -2px;
  border: 1px solid #999;
  border-radius: 3px;
  cursor: pointer;
  display: inline-block;
  position: relative;
}
.checkbox i {
  width: 12px;
  height: 12px;
  line-height: 14px;
  color: #409EFF;
  font-size: 12px;
  font-weight: 700;
  text-indent: -2px;
  font-family: 黑体;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
}
.cwl-other a {
  color: #409EFF;
  margin: 0;
  display: block;
}
.cwl-btn, .rwc-btn {
  margin: 15px 0 35px;
}
.cwl-btn .btn, .rwc-btn .btn {
  width: 100%;
  height: 50px;
  font-size: 18px;
}
.cwl-register p {
  line-height: 20px;
  color: #999;
  font-size: 14px;
  margin: 0;
}
.cwl-register p a {
  color: #409EFF;
}
.cwl-reg-wrap {
  padding-top: 25px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
}
.cwl-reg-wrap-i {
  width: 145px;
  margin: 0 20px;
}
.cwl-reg-wrap-i .icon {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  border-radius: 100px;
  display: -webkit-flex;
  display: flex;
  align-items: -webkit-center;
  align-items: center;
}
.cwl-reg-wrap-i .icon svg {
  width: 18px;
  height: 18px;
  color: #fff;
  margin: 0 auto;
}
.cwl-reg-wrap-i .icon.weixin svg {
  width: 22px;
  height: 22px;
}
.cwl-reg-wrap-i .icon.qq {
  background-color: #3CAAE3;
}
.cwl-reg-wrap-i .icon.weixin {
  background-color: #4FC87C;
}
.cwl-reg-wrap-i .txt {
  height: 32px;
  line-height: 32px;
  color: #8a8a8a;
  font-size: 14px;
  text-align: center;
  font-family: Microsoft YaHei,Avenir,Helvetica,Arial,sans-serif;
  margin-top: 10px;
}
.content-wrap-r {
  width: 370px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  position: relative;
}
.cwr-wrap {
  width: 200px;
  min-height: 270px;
  text-align: center;
  background-color: #f7f7f7;
  padding: 30px 0;
  margin: 0 auto;
  margin-top: -15px;
  border-radius: 5px;
}
.cwr-wrap-logo {
  width: 107px;
  height: 107px;
  margin: 0 auto;
}
.cwr-wrap-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cwr-wrap-title {
  line-height: 21px;
  font-size: 16px;
  color: #666;
  margin-top: 20px;
}
.cwr-wrap-describe {
  line-height: 16px;
  color: #999;
  font-size: 12px;
  margin-top: 10px;
}
.cwr-wrap-link {
  width: 145px;
  margin: 15px auto 0;
}
.cwr-wrap-link a {
  height: 32px;
  line-height: 32px;
  color: #666;
  font-size: 12px;
  background-color: #fff;
  display: block;
}
.register-wrap-content-title {
  height: 50px;
  line-height: 50px;
  color: #409EFF;
  font-size: 26px;
  font-weight: 600;
  text-align: center;
  margin-top: 20px;
}
.rwc-form-i {
  margin-top: 20px;
  border-bottom: 1px solid #ebebeb;
}
.rwc-form-i-wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.rwc-form-i-wrap input::-webkit-input-placeholder {
  color: #666;
}
.rwc-form-i-wrap input:-moz-placeholder {
  color: #666;
}
.rwc-form-i-wrap input::-moz-placeholder {
  color: #666;
}
.rwc-form-i-wrap input:-ms-input-placeholder {
  color: #666;
}
.get-code {
  width: 110px;
  height: 36px;
  line-height: 36px;
  color: #409EFF;
  font-size: 14px;
  text-align: center;
  margin-top: 12px;
  padding: 0 6px;
  background-color: #fff;
  border: 1px solid #409EFF;
  border-radius: 5px;
  cursor: pointer;
  display: inline-block;
}
.rwc-form-i-remind {
  color: #999;
  font-size: 14px;
}
.rwc-form-i-remind a {
  color: #409EFF;
}
.rwc-other a {
  color: #409EFF;
}
.rwc-login-link {
  color: #409EFF;
  font-size: 14px;
  text-align: right;
}
.get-psw-form-i {
  display: block;
}
.get-psw-form-code-i {
  justify-content: space-between;
}
.get-psw-form-i-wrap {
  margin-top: 20px;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.get-psw-form-i-l {
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.get-psw-wrap .cwl-btn {
  margin: 50px 0 0 0;
}

.footer {
	padding: 65px 0;
}
.footer-txt {
	text-align: center;
	color: #999999;
	font-size: 14px;
	line-height: 30px;
}
.footer-txt p {
  margin: 0;
}
.footer-txt p a {
  color: #409EFF;
}
</style>
